<template>
  <basic-container>
    <div class="receiving-container">
      <div class="form">
        <avue-form class="typeForm" v-model="typeObj" :option="typeOption"></avue-form>
        <avue-form :key="timer" ref="properties" v-model="properties" :option="propertiesOption" @submit="submit">
          <template slot-scope="{}" slot="mpqLabel">
            <el-tooltip class="item" effect="dark" content="MPQ（Minimum Package Quantity）指物料最小包装数量" placement="top-start">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>&nbsp;MPQ:</span>
          </template>
        </avue-form>
      </div>
      <!-- <div>
        <el-button size="small">提 交</el-button>
        <el-button size="small">清 空</el-button>
      </div> -->
    </div>

    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </basic-container>
</template>
<script>
import { submitReceive } from '@/api/warehouse/receiving';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';

export default {
  components: {
    CommonModalTemplate
  },
  mounted() {},
  data() {
    return {
      typeObj: {
        type: 'NO'
      },
      properties: {},
      form: {},
      tableOption: {},
      isShowForm: false,
      timer: new Date().getTime(),
      typeOption: {
        labelWidth: '130',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '类型',
            prop: 'type',
            type: 'select',
            row: true,
            dicData: [
              {
                label: '有供应商',
                value: 'YES'
              },

              {
                label: '无供应商',
                value: 'NO'
              },
              {
                label: '客户',
                value: 'CUSTOMER'
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入选择类型',
                trigger: 'blur'
              }
            ],
            change: (val) => {
              let result = val.value;
              this.isShowInput(result);
            }
          }
        ]
      },
      propertiesOption: {
        submitText: '收料',
        labelWidth: 130,
        menuSpan: 14,
        column: [
          {
            label: '供应商名称',
            prop: 'vendorName',
            type: 'search',
            display: true,
            disabled: true,
            row: true,
            rules: [
              {
                required: true,
                message: '请选择供应商名称',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openVendorModal();
            }
          },
          {
            label: '供应商批次',
            prop: 'vendorLotNo',
            display: true,
            row: true,
            rules: [
              {
                required: true,
                message: '请输入供应商批次',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '供应商代码',
            prop: 'vendorCode',
            row: true,
            display: true,
            disabled: true
          },
          {
            label: '客户名称',
            prop: 'vendorName',
            type: 'search',
            display: true,
            disabled: true,
            row: true,
            rules: [
              {
                required: true,
                message: '请选择供应商名称',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openVendorModal();
            }
          },
          {
            label: '客户代码',
            prop: 'vendorCode',
            row: true,
            display: true,
            disabled: true
          },
          {
            label: '物料名称',
            prop: 'partName',
            type: 'search',
            disabled: true,
            row: true,
            rules: [
              {
                required: true,
                message: '请选择物料名称',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openPartModal();
            }
          },
          {
            label: '物料编码',
            prop: 'partNo',
            disabled: true,
            row: true
          },
          {
            label: '物料规格',
            prop: 'partModel',
            disabled: true,
            row: true
          },

          {
            label: '生产日期',
            prop: 'vendorDate',
            type: 'datetime',
            row: true,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            rules: [
              {
                required: true,
                message: '请选择物料',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '收货数量',
            prop: 'receiveQuantity',
            type: 'number',
            precision: 10,
            controls: false,
            minRows: '',
            row: true,
            rules: [
              {
                required: true,
                message: '请输入收货数量',
                trigger: 'blur',
                validator: (rule, value, callback) => {
                  console.log(value, 9999);
                  if (value <= 0) {
                    callback(new Error('收货数量需大于0'));
                  } else {
                    callback();
                  }
                }
              }
            ]
          },
          {
            label: 'MPQ',
            prop: 'mpq',
            row: true,
            labelTip: 'MPQ（Minimum Package Quantity）指物料最小包装数量'
          },
          {
            label: '备注',
            prop: 'description',
            type: 'textarea',
            row: true,
            maxRows: 3,
            minRows: 3
          }
        ]
      }
    };
  },
  computed: {},
  methods: {
    submit() {
      this.$refs.properties.validate((valid, done) => {
        if (valid) {
          this.properties['receiveType'] = 'OTHER';
          this.form = {
            actuallyReceive: 0,
            completedQuantity: 0,
            createDept: 0,
            createTime: '',
            createUser: 0,
            description: '',
            destroyQuantity: 0,
            documentNo: '',
            endTime: '',
            examineResult: '',
            extFields: '',
            extractionQuantity: 0,
            partMasterId: this.properties.partId,
            inboundQuantity: '',
            inspectionMode: '',
            inspectionStatus: 0,
            isDeleted: 0,
            isExtraction: true,
            isForcePack: true,
            isLabelPrinted: true,
            isPackFinished: true,
            isPacked: true,
            isTailBox: true,
            lotNo: '',
            materialId: 0,
            mpq: 0,
            packId: 0,
            packSeqDefinitionName: '',
            packStatus: 0,
            packingSeqDefinitionId: 0,
            partModel: '',
            partName: '',
            partNo: '',
            partnerId: 0,
            quantity: 0,
            receiveBy: '',
            receiveDate: '',
            receiveNo: '',
            receiveQuantity: 0,
            receiveType: '',
            sequenceGenerated: false,
            sequenceNoFormat: '',
            sequenceNumber: '',
            sheetDetailId: '',
            sheetDetailNo: '',
            sheetId: '',
            sheetLot: '',
            sheetNo: '',
            sheetType: '',
            siteId: 0,
            startTime: '',
            status: 0,
            tenantId: '',
            updateTime: '',
            updateUser: 0,
            vendorCode: '',
            vendorDate: '',
            vendorLotNo: '',
            vendorName: '',
            ...this.properties,
            receivingOption: {
              mpq: this.properties.mpq
            }
          };
          delete this.form.id;
          let params = {
            packingList: [],
            receivingList: [this.form]
          };
          submitReceive(params).then(
            () => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              done();
              this.$refs.properties.resetForm();
            },
            (error) => {
              done();
              window.console.log(error);
            }
          );
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getSelectedRows(rowData, title) {
      console.log(title, 'title');
      if (title === 'partInfo') {
        this.properties = {
          ...rowData
        };
        this.properties['partName'] = rowData.name;
        this.properties['partNo'] = rowData.partNo;
        this.properties['partModel'] = rowData.partModel;
        this.properties['partId'] = rowData.id;
      } else {
        this.properties['vendorName'] = rowData.name;
        this.properties['vendorCode'] = rowData.partnerNo;
      }
    },
    /**
     * 供应商模态框
     */
    openVendorModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: this.typeObj.type == 'CUSTOMER' ? '选择客户信息（双击进行选择）' : '选择供应商信息（双击进行选择）',
        url: `/api/mes-admin/partner/page?partnerType=${this.typeObj.type == 'CUSTOMER' ? 'CUSTOMER' : 'SUPPLIER'}`,
        isPage: true,
        selection: true,
        rowSelectionType: 'single',
        titleInfo: 'vendorInfo',
        columnDefs: [
          {
            label: '类型',
            prop: 'partnerType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=partner_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'code',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'name',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '缩写',
            prop: 'abbreviation',
            rules: [
              {
                required: true,
                message: '请输入缩写',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系人',
            prop: 'principal',
            rules: [
              {
                required: true,
                message: '请输入联系人',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系方式',
            prop: 'contacts',
            rules: [
              {
                required: true,
                message: '请输入联系方式',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '位置',
            prop: 'locations',
            type: 'search'
          },
          {
            label: '条码规则',
            prop: 'sequenceName',
            type: 'search'
          }
        ]
      };
    },
    /**
     * 物料模态框
     */
    openPartModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择物料信息（双击进行选择）',
        url: '/api/mes-admin/part-master/page',
        isPage: true,
        selection: true,
        isDefaultLoad: false,
        rowSelectionType: 'single',
        titleInfo: 'partInfo',
        noResetRequest: true,
        searchMenuSpan: 24,
        columnDefs: [
          {
            label: '类型',
            prop: 'semifinished',
            search: true,
            hide: true,
            type: 'select',
            dicData: [
              {
                label: '原材料',
                value: false
              },
              {
                label: '在制品',
                value: true
              }
            ],
            searchRules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '类别',
            prop: 'categoryId',
            search: true,
            type: 'tree',
            dicUrl: '/api/mes-admin/part-category/tree',
            props: {
              label: 'title',
              value: 'id'
            }
          },
          {
            label: '编码',
            prop: 'partNo',
            search: true
          },
          {
            label: '名称',
            prop: 'name',
            search: true
          },
          {
            label: '型号',
            prop: 'partModel'
          },
          {
            label: '描述',
            prop: 'description'
          },
          {
            label: '版本',
            prop: 'revision'
          }
        ]
      };
    },
    isShowInput(type) {
      let col = this.propertiesOption.column;
      this.newKey();
      if (type === 'YES') {
        col[0].display = true;
        col[1].display = true;
        col[2].display = true;
        col[3].display = false;
        col[4].display = false;
      } else if (type === 'CUSTOMER') {
        col[0].display = false;
        col[1].display = false;
        col[2].display = false;
        col[3].display = true;
        col[4].display = true;
      } else {
        col[0].display = false;
        col[1].display = false;
        col[2].display = false;
        col[3].display = false;
        col[4].display = false;
      }
      this.$nextTick(() => {
        this.$refs.properties.resetForm();
      });
      this.properties = {};
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped>
.receiving-container {
  height: 83vh;
}
.form {
  width: 70%;
  display: flex;
  flex-direction: column;
  margin-left: 25%;
  ::v-deep .avue-form__group--flex {
    flex-direction: column;
  }
}
::v-deep .typeForm {
  .avue-form__menu {
    display: none;
  }
}
</style>
